<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" >
<head>
    <meta charset="UTF-8">
    <title>图书管理系统-角色管理</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/jquery-1.11.0.min.js}"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="inc/top :: div"></div>
    <div th:replace="inc/left :: div"></div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;" id="lay_body">
            <table class="layui-table">
                <thead>
                <tr>
                    <td width="70" align="center">序号</td>
                    <td align="center">角色名称</td>
                    <td align="center">操作</td>
                </tr>
                </thead>
                <tbody>
                <tr th:each="role,stat : ${roles}">
                    <td width="70" th:text="${stat.index}"></td>
                    <td th:text="${role.roleName}"  align="center"></td>
                    <td th:width="250" align="center">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" >查看</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" >删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <form>

            </form>
        </div>
    </div>
    <div th:replace="inc/foot :: div"></div>
</div>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
</script>
<script type="text/javascript">
    $(function () {
        $('#menu a').each(function () {
            var aText = $(this).text();
            if('角色管理' == aText){
                $(this).parent('dd').addClass('layui-this');
            }
        });
    });
</script>
</body>
</html>